<template>
  <el-dropdown @command="handleCommand" @visible-change="handleVisibleChange">
    <span class="avatar-dropdown">
      <el-avatar class="user-avatar" :src="avatar" />
      <div class="user-name">
        <span class="hidden-xs-only">{{ userinfo.username }}</span>
        <vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': active }" icon="arrow-down-s-line" />
      </div>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="updatePass">
          <vab-icon icon="lock-2-line" />
          {{ translateTitle('修改密码') }}
        </el-dropdown-item>
        <el-dropdown-item command="logout">
          <vab-icon icon="logout-circle-r-line" />
          {{ translateTitle('退出登录') }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
    <vxe-modal id="updatePass" v-model="pwd" width="400" height="300" :draggable="false">
      <template #title>
        <span>修改密码</span>
      </template>
      <template #default>
        <el-form :model="pwdForm" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="原密码" prop="old_pass">
            <el-input v-model="pwdForm.old_pass" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_pass">
            <el-input v-model="pwdForm.new_pass" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirm_new_pass">
            <el-input v-model="pwdForm.confirm_new_pass" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">确认修改</el-button>
          </el-form-item>
        </el-form>
      </template>
    </vxe-modal>
  </el-dropdown>
</template>

<script>
  import {
    translateTitle
  } from '@/utils/i18n'
  import { updatePwd } from '@/api/user'
  import {
    mapActions,
    mapGetters
  } from 'vuex'
  import {
    toLoginRoute
  } from '@/utils/routes'

  export default {
    name: 'VabAvatar',
    data() {
      return {
        active: false,
        pwd: false,
        pwdForm: {
          old_pass: '',
          new_pass: '',
          confirm_new_pass: ''
        },
        rules: {
          old_pass: [{
              required: true,
              message: '请输入原密码',
              trigger: 'blur'
            }
          ],
          new_pass: [{
              required: true,
              message: '请输入新密码',
              trigger: 'blur'
            }
          ],
          confirm_new_pass: [{
              required: true,
              message: '请确认新密码',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        userinfo: 'user/userinfo',
      }),
    },
    methods: {
      translateTitle,
      ...mapActions({
        _logout: 'user/logout',
      }),
      handleCommand(command) {
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'updatePass':
            this.pwd = true
            this.pwdForm = {
              old_pass: '',
              new_pass: '',
              confirm_new_pass: ''
            }
            break
        }
      },
      handleVisibleChange(val) {
        this.active = val
      },
      async logout() {
        await this._logout()
        await this.$router.push(toLoginRoute(this.$route.fullPath))
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            updatePwd(this.pwdForm).then(res =>{
              this.logout()
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;

    .user-avatar {
      width: 40px;
      height: 40px;
      margin-left: 15px;
      cursor: pointer;
      border-radius: 50%;
    }

    .user-name {
      position: relative;
      display: flex;
      align-content: center;
      align-items: center;
      height: 40px;
      margin-left: 6px;
      line-height: 40px;
      cursor: pointer;

      [class*='ri-'] {
        margin-left: 0 !important;
      }
    }
  }
</style>
